<template>
  <el-image :src="authImg" :alt="authImg" :preview-src-list="[authImg]" fit="cover"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2" :initial-index="4" :z-index="999">
    <template #placeholder>
      <div class="image-slot">Loading<span class="dot">...</span></div>
    </template>
  </el-image>
</template>

<script setup name="">
import util from '@/utils/utils'
import { ref, watch } from "vue";
const props = defineProps({
  imgUrl: {
    type: String,
    default: '',
  }
});
const authImg = ref('');
function getImgUrl(){
  Object.defineProperty(Image.prototype,"imgurl",{
    configurable: true,
    enumerable: true,
  })
  if(!props.imgUrl.endsWith('.jpg')
      && !props.imgUrl.endsWith('.webp')
      && !props.imgUrl.endsWith('.png')){
    authImg.value = '';
    return;
  }
  const request = new XMLHttpRequest();
  request.responseType = 'arraybuffer';
  request.open('get', import.meta.env.VITE_BASE_API+`/getImage?filePath=${props.imgUrl}`, true);
  let token = util.getToken();
  if(!token){
    token = "";
  }
  request.setRequestHeader(util.getTokenKey(), token);
  request.onreadystatechange = e => {
    if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
      // console.log(request.response);
      let base64Img = btoa(String.fromCharCode.apply(null, new Uint8Array(request.response)));
      // console.log('图片',base64Img);
      authImg.value = 'data:image/jpeg;base64,' + base64Img
    }
  };
  request.send(null);
}
watch(()=> props.imgUrl,()=>{
  getImgUrl();
})
getImgUrl();
</script>

<style lang="scss">
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>